<template>
    <div class="registerBody">
        <div class="left">
            <img src="@/assets/img/logo2.png" />
            <!-- 去旅行 -->
            <!-- <img src="@/assets/img/logo.png" /> -->
        </div>
        <div class="registerDiv">
            <div class="register-content">

                <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="0px" label-position="left">
                    <h1 class="register-title">注册账户</h1>
                    <el-form-item label="" prop="no">
                        <el-input type="text" v-model="ruleForm.no" prefix-icon="el-icon-user-solid" autocomplete="off"
                            placeholder="请输入你的账户"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="name">
                        <el-input type="text" v-model="ruleForm.name" autocomplete="off" prefix-icon="el-icon-user-solid"
                            placeholder="请输入你的昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入你的密码"
                            prefix-icon="el-icon-lock"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="checkPass">
                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请确认你的密码"
                            prefix-icon="el-icon-lock"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :disabled="confirm_disabled" style="background: #505458;border:none"
                            @click="submitForm(ruleForm)">注册</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                        <el-button @click="login()" type="success" style="margin-left: 110px;"
                            round>已有账户?&nbsp;&nbsp;&nbsp;返回登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Register",
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            confirm_disabled: false,
            ruleForm: {
                no: '',
                name: '',
                password: '',
                checkPass: "",
            },
            rules: {
                no: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入昵称', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' },
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],

            }
        };
    },
    methods: {
        submitForm() {
            this.confirm_disabled = true;
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {  //valid成功为true,失败为false
                    //去后台验证用户密码
                    this.$axios.post(this.$httpUrl + '/user/register', this.ruleForm).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code == 200) {
                            //存储
                            sessionStorage.setItem("CurUser", JSON.stringify(res.data))
                            this.$message({
                                message: '恭喜你注册成功！',
                                type: 'success'
                            });
                            //跳转到主页
                            this.$router.replace('/');
                        } else {
                            this.confirm_disabled = false;
                            this.$message({
                                message: '用户名已存在',
                                type: 'error'
                            });
                            return false;
                        }
                    });
                } else {
                    this.confirm_disabled = false;
                    this.$message({
                        message: '注册失败！请确认信息是否正确！',
                        type: 'error'
                    });
                    return false;
                }
            });

        },
        register() {
            this.$router.replace('/');
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        login() {
            this.$router.replace('/');
        }
    }
}
</script>

<style  scoped>
.element.style {
    width: 300px;
}

img {
    width: 300px;
    margin-left: 200px;
    margin-top: 160px;
    /* border: 1px solid black; */

}
.left{
    width: 100px;
    height: 200px;
    color: #fff;
    /* margin-left: 200px; */

}
.registerBody {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(@/assets/img/bj4.jpg) no-repeat;
    /* background-color: #B3C0D1; */
}

.registerDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    /* margin-left: -200px; */
    width: 480px;
    height: 400px;
    background: #fff;
    border-radius: 5%;
    background-color: rgba(226, 234, 236, 0.7);
    /* 蓝色背景，50% 透明 */
    /* backdrop-filter: blur(2px) brightness(95%); */
    box-shadow: 0px 0px 30px -10px #0a1032;
}

.register-title {
    margin: 20px 0;
    margin-left: 20px;
    color: rgb(36, 37, 38);
    text-align: center;
    /* border: 1px solid black; */
}

.register-content {
    width: 400px;
    height: 250px;
    position: absolute;
    top: 25px;
    left: 40px;

}
</style>